<template>
  <div>
    <van-form ref="mainForm">
      <symui-field-cell
        :model="model"
        :form="form"
      />
    </van-form>
    <div style="margin: 16px;">
      <van-button round block :loading="loading" loading-text="提交中..." type="info" @click="onSubmit">提交</van-button>
    </div>
    <pre style="font-family: Microsoft Yahei">{{ model }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: [
        {
          readonly: false,
          required: true,
          label: '输入框',
          prop: 'field',
          type: 'field',
          placeholder: '请输入',
          class: 'up'
        },
        {
          readonly: false,
          required: true,
          label: '多行输入框',
          prop: 'textarea',
          type: 'field',
          fieldType: 'textarea',
          placeholder: '请输入',
          class: 'down'
        },
        {
          readonly: false,
          required: true,
          label: '单选',
          prop: 'select',
          columns: [
            { label: '选项1', value: '选项1' },
            { label: '选项2', value: '选项2' },
            { label: '选项3', value: '选项3' }
          ],
          // handle: 'modules/function',
          type: 'select',
          placeholder: '请选择',
          class: 'up'
        },
        {
          readonly: false,
          required: true,
          label: '多选',
          prop: 'checkbox',
          columns: [
            { label: '选项1', value: '选项1' },
            { label: '选项2', value: '选项2' },
            { label: '选项3', value: '选项3' }
          ],
          // handle: 'modules/function',
          type: 'checkbox',
          placeholder: '请选择',
          class: 'down'
        },
        {
          readonly: true,
          required: true,
          label: '日期时间',
          prop: 'datetime',
          type: 'datetime',
          placeholder: '请选择',
          class: 'up'
        },
        {
          readonly: true,
          required: true,
          label: '日期',
          prop: 'date',
          type: 'date',
          placeholder: '请选择',
          class: 'middle'
        },
        {
          readonly: true,
          required: true,
          label: '时间',
          prop: 'time',
          type: 'time',
          placeholder: '请选择',
          class: 'down'
        },
        {
          readonly: true,
          required: true,
          label: '附件上传',
          prop: 'xgfj',
          type: 'upload',
          class: 'single',
          maxCount: 2
        }
      ],
      model: {},
      loading: false
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      this.$refs.mainForm.validate().then(() => {
        console.log(this.model)
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }, () => {
        this.$toast.fail('信息未填写完整')
      })
    }
  }
}
</script>
<style lang="scss">

</style>
